<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MIO美爱我氧气站</title>
        <link rel="icon" href="${pageContext.request.contextPath }/assets/images/mio.ico" type="image/x-icon">
        <link href="${pageContext.request.contextPath }/assets/css/main.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath }/assets/css/product.css" rel="stylesheet" type="text/css" />		
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-1.9.1.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/assets/videoplayer/flowplayer-3.2.8.min.js"></script>
    </head>
    <body>
    	<div id="bg">
	    	<!-- 头部jsp -->
			<jsp:include page="header.jsp" ></jsp:include>
			<div style="clear:both;"></div>
			<div class="product-img" style="background:url(${banner.fileFullPath }); background-size: 1000px;">
			</div>
		</div>
		<div id="bg">
			<div class="leftProduct">
				<div class="leftProduct-title">
				产品介绍
				</div>
					<div class="ulStyle">
						<c:forEach var="item" items="${productTypes }" varStatus="status">
							<div class="text" id="pro${item.id }">
		          				<a href="#" onclick="show_pro_class(${item.id },0);return products_class_change(${item.id })">
		          					<span>${item.productTypeName }</span>
		          				</a>
	          				</div>
	          				<ul id="pro_class${item.id }" style="display: <c:if test="${mainTypeId == item.id}">block;</c:if><c:if test="${mainTypeId != item.id}">none;</c:if>">
		          				<c:forEach var="p" items="${item.nodes }" >
		          				<li><a href="${pageContext.request.contextPath }/product.do?productType=${p.id}">${p.productTypeName }</a></li>
	          					</c:forEach>
	          				</ul>
						</c:forEach>
						
	                <script>
		                function show_pro_class(number,page){
		                	/**$.ajax({
		                		type: "POST",
		                		dataType:'json',
		                		data:{
		                            'number'	: number,
		                            'page'		: page
		                        },
		                		url: _Web_Url + "/index.php/web/show_pro_class/",
		                		success: function(data){
		                			document.getElementById('show_pro_div').innerHTML = data.ProductList;
		                		}
		                	});**/
		                }
						function products_class_change(x){
							if (document.getElementById('pro_class'+x).style.display=='none'){
								 $('#pro_class'+x).show(300);
							}else{
								 $('#pro_class'+x).hide(300);
							}
							return false;
						}
													
						function pro_menu_change(x,key){
							if (key ==1){
								document.getElementById('pro_menu_a_'+x).style.display = "none";
								document.getElementById('pro_menu_b_'+x).style.display = "";
							}else{
								document.getElementById('pro_menu_a_'+x).style.display = "";
								document.getElementById('pro_menu_b_'+x).style.display = "none";
							}
						}
					</script>
				</div>
			</div>
			<div class="rightProduct">
				<div class="rightProduct-title">
					Product
				</div>
				<div class="rightProduct-content">
					<c:forEach var="item" items="${products }" varStatus="status">
					<div class="productItem">
						<div class="productImg">
							<a href="${pageContext.request.contextPath }/productDetail.do?productType=${productTypeId }&mainTypeId=${mainTypeId }&productId=${item.id }">
								<img style="width:108px;height:108px; margin-left:5px;" src="${item.mImgUrl } " alt="${item.productName }" border="0">
							</a>
						</div>
						<div class="productContent">
							<a href="${pageContext.request.contextPath }/productDetail.do?productType=${productTypeId }&mainTypeId=${mainTypeId }&productId=${item.id }">${item.productName }</a>
						</div>
					</div>
					</c:forEach>
					<!--  <div class="productItem">
						<div class="productImg">
							<a href="productDetail.jsp">
								<img style="width:118px;height:76px;margin-top:16.5px;" src="${pageContext.request.contextPath }/assets/images/product1.jpg " alt="「轻透薄服贴」是MIO面膜的特点！MIO天丝布膜研造的编织技术使面膜布薄且透，是一种长纤维的布膜，同时也抓水力也足够！" border="0">
							</a>
						</div>
						<div class="productContent">
							<a href="#">「轻透薄服贴」是MIO面膜的特点！MIO天丝布膜研造的编织技术使面膜布薄且透，是一种长纤维的布膜，同时也抓水力也足够！</a>
						</div>
					</div>-->
				</div>
				<ul class="page">
					<li>
						<c:if test='${pageStart==1}'>
							<a onclick="return false;" href="#">上一页</a>
						</c:if>
						<c:if test='${pageStart > 1}'>
							<a href="${pageContext.request.contextPath }/product.do?productType=${productTypeId }&pageStart=${pageStart-1 }&pageCount=${pageCount }">上一页</a>							
						</c:if>
					</li>
					<c:if test="${pageStart + 2<=pageCount}">
						<c:forEach varStatus="i" begin="${pageStart }" end="${pageStart + 2}" step="1">
							<c:if test="${i.index == 1}">
							<li style="color:#F00; font-weight:bold;font-size:20px;">${pageStart }</li>
							</c:if>
							<c:if test="${i.index > 1}">
							<li>
								<a href="${pageContext.request.contextPath }/product.do?productType=${productTypeId }&pageStart=${pageStart+i.index }&pageCount=${pageCount }">${pageStart+i.index }</a>
							</li>	
							</c:if>
						</c:forEach>
					</c:if>
					<c:if test="${pageStart + 2>pageCount}">
						<c:forEach varStatus="i" begin="${pageStart }" end="${pageCount }" step="1">
								<c:if test="${i.index == 1}">
								<li style="color:#F00; font-weight:bold;font-size:20px;">${pageStart }</li>
								</c:if>
								<c:if test="${i.index > 1}">
								<li>
									<a href="${pageContext.request.contextPath }/product.do?productType=${productTypeId }&pageStart=${pageStart+i.index }&pageCount=${pageCount }">${pageStart+i.index }</a>
								</li>	
								</c:if>
						</c:forEach>
					</c:if>
					<li>
						<c:if test='${pageStart==pageCount}'>
							<a onclick="return false;" href="#">下一页</a>
						</c:if>
						<c:if test='${pageStart < pageCount}'>
							<a href="${pageContext.request.contextPath }/product.do?productType=${productTypeId }&pageStart=${pageStart-1 }&pageCount=${pageCount }">下一页</a>							
						</c:if>
					</li>
				</ul>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="bg"> 
			<!-- 尾部jsp -->
			<jsp:include page="footer.jsp"></jsp:include>
			
	    </div>
    </body>
</html>